/* ==========================================================
   AI Delivery - Where You Can Start (entry-point table)
   File: wwwroot/css/ai-delivery-start.css
   Used by: Views/Partials/blocklist/Components/aiDeliveryStartBlock.cshtml
   Fluid layout: same scaling as the other blocks (6.8vw gutter).
   ========================================================== */
.ai-sr {
  --sr-navy: #14256b;
  --sr-head: #13235f;
  --sr-stripe: #f5f8fc;
  --sr-hover: #eaf0f9;
  --sr-line: #e6eaf2;
  --sr-orange: #ff9a45;
  --sr-gutter: 6.8vw;
  --sr-px: clamp(14px, 1.25vw, 32px);
  --sr-ease-out: cubic-bezier(.16, 1, .3, 1);

  box-sizing: border-box;
  width: 100%;
  background: #fff;
  padding: clamp(40px, 3.6vw, 92px) var(--sr-gutter) clamp(40px, 3.6vw, 92px);
  font-family: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
  color: var(--sr-navy);
  -webkit-font-smoothing: antialiased;
}
.ai-sr *, .ai-sr *::before, .ai-sr *::after { box-sizing: border-box; margin: 0; padding: 0; }

.ai-sr__heading {
  margin-bottom: clamp(14px, 1.6vw, 42px);
  font-size: clamp(22px, 1.67vw, 43px);
  font-weight: 600;
  line-height: 1.3;
  color: var(--sr-navy);
}

/* ---------- Table ---------- */
.ai-sr__table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}
.ai-sr__c1 { width: 20.6%; }
.ai-sr__c2 { width: 13.8%; }
.ai-sr__c3 { width: 26.6%; }
.ai-sr__c4 { width: 39%; }

.ai-sr__table thead th {
  padding: clamp(12px, 1.25vw, 32px) var(--sr-px);
  background: var(--sr-head);
  font-size: clamp(12px, .9vw, 23px);
  font-weight: 600;
  line-height: 1.4;
  text-align: left;
  color: #fff;
}
.ai-sr__table tbody th,
.ai-sr__table tbody td {
  padding: clamp(12px, 1.4vw, 36px) var(--sr-px);
  border-bottom: 1px solid var(--sr-line);
  vertical-align: top;
  text-align: left;
  font-size: clamp(12px, .88vw, 23px);
  line-height: 1.65;
  color: var(--sr-navy);
}
.ai-sr__table tbody th { font-weight: 600; }
.ai-sr__table tbody td { font-family: "DM Sans", "Poppins", sans-serif; font-weight: 400; }

.ai-sr__row { background-color: #fff; transition: background-color .5s ease; }
.ai-sr__row:nth-child(odd) { background-color: var(--sr-stripe); }

/* soft hover: row tints and a thin orange marker fades in at the left */
.ai-sr__row th { position: relative; }
.ai-sr__row th::before {
  content: "";
  position: absolute;
  top: 0; bottom: 0; left: 0;
  width: 3px;
  background: var(--sr-orange);
  opacity: 0;
  transform: scaleY(.4);
  transition: opacity .5s ease, transform .6s var(--sr-ease-out);
}
@media (hover: hover) {
  .ai-sr__row:hover { background-color: var(--sr-hover); }
  .ai-sr__row:hover th::before { opacity: 1; transform: none; }
}

/* ---------- Entrance (added by JS only) ---------- */
.ai-sr.js-reveal .ai-sr__fx { opacity: 0; transform: translateY(18px); }
.ai-sr.js-reveal.is-visible .ai-sr__fx {
  opacity: 1;
  transform: none;
  transition: opacity .8s ease var(--fd, 0s), transform 1s var(--sr-ease-out) var(--fd, 0s), background-color .5s ease;
}

/* ---------- Responsive ---------- */
@media (max-width: 1200px) { .ai-sr { --sr-gutter: 32px; } }
@media (max-width: 900px)  { .ai-sr { --sr-gutter: 24px; } }

/* phones: each row becomes a card with its own labels */
@media (max-width: 700px) {
  .ai-sr { --sr-gutter: 20px; }
  .ai-sr__table, .ai-sr__table tbody, .ai-sr__table tr, .ai-sr__table th, .ai-sr__table td { display: block; width: 100%; }
  .ai-sr__table colgroup, .ai-sr__table thead { display: none; }
  .ai-sr__table tbody { display: grid; gap: 12px; }
  .ai-sr__row, .ai-sr__row:nth-child(odd) { background: var(--sr-stripe); border-top: 3px solid var(--sr-head); }
  .ai-sr__row th::before { display: none; }
  .ai-sr__table tbody th {
    padding: 14px 16px 10px;
    border-bottom: 1px solid var(--sr-line);
    font-size: 15px;
  }
  .ai-sr__table tbody td { padding: 10px 16px; border-bottom: 0; font-size: 14px; }
  .ai-sr__table tbody td:last-child { padding-bottom: 16px; }
  .ai-sr__table tbody td::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 2px;
    font-family: "Poppins", sans-serif;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #6b7391;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ai-sr *, .ai-sr *::before { transition: none !important; }
}